<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>多行文字垂直居中-方法二增加一个空白标签</title>
        <style>
        .middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
        .middle-box p{vertical-align: middle; display: inline-block; *display: inline; *zoom: 1;}
        .visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}
        </style>
    </head>
    <body>
        <!--[if !IE]>


        您使用不是 Internet Explorer


        <![endif]-->
        <!--[if !IE]>
         <h1>非IE标题：CSS多行文字垂直居中的两种方法</h1> 
        <![endif]-->
        <!--[if lt IE 8]> <h1>CSS多行文字垂直居中的两种方法</h1> <![endif]-->
        <p>来源:<a href="http://caibaojian.com/css-vertical-middle.html">http://caibaojian.com/css-vertical-middle.html</a></p>
        <h2>方法二：增加一个空白标签</h2>
        <div class="middle-box">
            <p><span class="suc-tip">前端开发博客，专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
            <i class="visible"></i>
            <p style="display:none;"><span class="suc-tip">5年的老博客，一直致力于WEB开发</span></p>
        </div>
    </body>
</html>